.city {
    width: 100%;
    padding: 10px 0 18px;
    border-bottom: 1px solid rgb(240, 240, 240);
    .city_book {
        font-size: 1.2em;
        font-weight: bold;
        margin: 10px 0;
    }
    .city_book_list {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        justify-content: space-between;
        .city_book_item {
            width: 100%;
            height: 100%;
            position: relative;
            &:nth-child(1)::before {
                content: "1";
                display: inline-block;
                position: absolute;
                right: -8px;
                top: -10px;
                z-index: 10;
                width: 20px;
                height: 20px;
                line-height: 20px;
                border-radius: 50%;
                color: #FFF;
                text-align: center;
                background: rgb(255, 128, 128);
            }
            &:nth-child(2)::before {
                content: "2";
                display: inline-block;
                position: absolute;
                right: -8px;
                top: -10px;
                z-index: 10;
                width: 20px;
                height: 20px;
                line-height: 20px;
                border-radius: 50%;
                color: #FFF;
                text-align: center;
                background: rgb(158, 255, 187);
            }
            &:nth-child(3)::before {
                content: "3";
                display: inline-block;
                position: absolute;
                right: -8px;
                top: -10px;
                z-index: 10;
                width: 20px;
                height: 20px;
                line-height: 20px;
                border-radius: 50%;
                color: #FFF;
                text-align: center;
                background: rgb(136, 178, 255);
            }
            .item_right {
                width: 96px;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                margin: 6px 0;
            }
        }
    }
    .flag_state {
        width: 100%;
        padding: 20px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .arrow_txt {
            display: inline-block;
            width: 20%;
            line-height: 20px;
            font-size: 15px;
            color: #929292;
            text-align: center;
        }
        .arrow {
            margin-left: 6px;
            display: inline-block;
            width: 0px;
            height: 0px;
            border: 6px solid transparent;
            border-left-color: #929292;
        }
    }
}